<template>
  <div class="wrap">
    <div class="left-container">
      <!-- 左边-标题 -->
      <p class="title-container">
        <img src="@/assets/images/icon@2x.png" alt="" />
        洪山体育中心篮球馆综合显示系
        <span>2020年2月12日 星期三</span>
      </p>
      <textarea name="" id="" placeholder="ssss" cols="30" rows="10"></textarea>
      <!-- 左边第一行 今日营收 -->
      <div class="today-revenue-container value-wrap">
        <div class="title-value-container">
          <div class="title-text-container">
            <img class="title-icon" src="@/assets/images/icon@2x.png" alt="" />
            今日营收
          </div>
          <p>25666元</p>
        </div>
        <div class="content-container">
          <div class="content-wrap">
            <p class="title">较昨日增加</p>
            <p class="value">
              246元
            </p>
          </div>
          <div class="content-wrap end-wrap">
            <p class="title">环比增量</p>
            <p class="value">
              12.6%
            </p>
          </div>
        </div>
      </div>
      <!-- 营收统计分析 -->
      <div class="statistics-container value-wrap">
        <div class="title-value-container">
          <div class="title-text-container">
            <img class="title-icon" src="@/assets/images/icon@2x.png" alt="" />
            营收统计分析
          </div>
          <p>人民币(元)</p>
        </div>
        <div class="content-container" id="chart1">
          <!-- <ve-line height="280px" :data="chartData" :settings="chartDataSetting" :y-axis="yAxis"></ve-line> -->
        </div>
      </div>
      <!-- 人群总数 -->
      <div class="today-people-container value-wrap">
        <div class="title-value-container">
          <div class="title-text-container">
            <img class="title-icon" src="@/assets/images/icon@2x.png" alt="" />
            人群总数
          </div>
          <p>2566人</p>
        </div>
        <div class="content-container">
          <div class="user-container">
            <el-progress
              class="progress"
              type="circle"
              :percentage="88"
            ></el-progress>
            <div class="main-wrap">
              <p class="sex-text">男性</p>
              <p class="number-text">2230人</p>
            </div>
            <p class="percentage-text">88%</p>
          </div>
          <div class="user-container">
            <el-progress
              class="progress"
              type="circle"
              :percentage="88"
            ></el-progress>
            <div class="main-wrap">
              <p class="sex-text">男性</p>
              <p class="number-text">2230人</p>
            </div>
            <p class="percentage-text">88%</p>
          </div>
        </div>
      </div>
      <!-- 年龄比例 -->
      <div class="age-container value-wrap">
        <div class="title-value-container">
          <div class="title-text-container">
            <img class="title-icon" src="@/assets/images/icon@2x.png" alt="" />
            年龄比例
          </div>
        </div>
        <div class="content-container">
          <el-progress class="age" type="circle" :percentage="20"></el-progress>
          <el-progress class="age" type="circle" :percentage="20"></el-progress>
          <el-progress class="age" type="circle" :percentage="20"></el-progress>
          <el-progress class="age" type="circle" :percentage="20"></el-progress>
          <el-progress class="age" type="circle" :percentage="20"></el-progress>
          <p>14岁以下</p>
          <p>14岁以下</p>
          <p>14岁以下</p>
          <p>14岁以下</p>
          <p>14岁以下</p>
        </div>
      </div>
      <!-- 年龄消费比例 -->
      <div class="age-pay-container value-wrap">
        <div class="title-value-container">
          <div class="title-text-container">
            <img class="title-icon" src="@/assets/images/icon@2x.png" alt="" />
            年龄消费比例
          </div>
        </div>
        <div class="content-container" id="chart2"></div>
      </div>
      <!-- 职业分布 -->
      <div class="post-container value-wrap">
        <div class="title-value-container">
          <div class="title-text-container">
            <img class="title-icon" src="@/assets/images/icon@2x.png" alt="" />
            职业分布
          </div>
        </div>
        <div class="content-container" id="chart3"></div>
      </div>
    </div>
    <div class="right-container">
      <p class="title-container">
        <img src="@/assets/images/wd-icon.png" alt="" />
        今日温度
        <span>27℃</span>
        <img src="@/assets/images/sd-icon.png" alt="" />
        今日湿度
        <span>56%</span>
        <img src="@/assets/images/js-icon.png" alt="" />
        今日降水量
        <span>无雨</span>
      </p>
      <div class="left-wrap info-wrap">
        <info-container
          title="场内温度"
          value="27℃"
          :icon="require('../../../assets/images/wd-icon.png')"
        ></info-container>
        <info-container
          title="场内湿度"
          value="65.1%"
          :icon="require('../../../assets/images/sd-icon.png')"
        ></info-container>
        <info-container
          title="今日服务人数"
          value="20"
          :icon="require('../../../assets/images/fw-icon.png')"
        ></info-container>
        <info-container
          title="今日订单数"
          value="30"
          :icon="require('../../../assets/images/dd-icon.png')"
        ></info-container>
        <info-container
          title="用水量统计"
          value="456m³"
          :icon="require('../../../assets/images/js-icon.png')"
        ></info-container>
        <info-container
          title="用电量统计"
          value="1238kw.h"
          :icon="require('../../../assets/images/yd-icon.png')"
        ></info-container>
        <info-container
          title="今日订单金额"
          value="12.8w"
          :icon="require('../../../assets/images/jrdd-icon.png')"
        ></info-container>
        <info-container
          title="烟雾告警器"
          value="正常"
          :icon="require('../../../assets/images/yw-icon.png')"
        ></info-container>
      </div>
      <div class="right-wrap info-wrap value-wrap status-wrap">
        <div class="title-value-container">
          <div class="title-text-container">
            <img class="title-icon" src="@/assets/images/icon@2x.png" alt="" />
            设备状态
          </div>
        </div>
        <div class="content-container">
          <div class="top-wrap">
            <el-progress
              class="progress"
              type="circle"
              :width="85"
              :percentage="25"
            ></el-progress>
            <p>在线</p>
            <el-progress
              class="progress"
              type="circle"
              :width="85"
              :percentage="25"
            ></el-progress>
            <p>离线</p>
          </div>
          <div class="bottom-wrap">
            <p>摄像头</p>
            <el-progress
              class="progress"
              :width="85"
              :percentage="25"
            ></el-progress>
            <p>温湿度</p>
            <el-progress
              class="progress"
              :width="85"
              :percentage="25"
            ></el-progress>
            <p>水表</p>
            <el-progress
              class="progress"
              :width="85"
              :percentage="25"
            ></el-progress>
            <p>电表</p>
            <el-progress
              class="progress"
              :width="85"
              :percentage="25"
            ></el-progress>
          </div>
        </div>
      </div>
      <div class="left-wrap video-wrap">
        <img width="100%" src="@/assets/images/入口闸机@2x.png" alt="" />
      </div>
      <div class="right-wrap video-wrap value-wrap plan-wrap">
        <div class="title-value-container">
          <div class="title-text-container">
            <img class="title-icon" src="@/assets/images/icon@2x.png" alt="" />
            赛事安排
          </div>
          <p>2020年3月4日</p>
        </div>
        <div class="content-container">
          <p class="title">洪山体育中心第七届篮球赛</p>
          <p class="value">
            关谷二队 VS 光谷一队
            <span>9:00-10:00</span>
          </p>
          <p class="value change-background">
            关谷二队 VS 光谷一队
            <span>9:00-10:00</span>
          </p>
          <p class="value">
            关谷二队 VS 光谷一队
            <span>9:00-10:00</span>
          </p>
          <p class="value change-background">
            关谷二队 VS 光谷一队
            <span>9:00-10:00</span>
          </p>
        </div>
      </div>
      <div class="left-wrap video-wrap video1">
        <img width="100%" src="@/assets/images/主赛场@2x.png" alt="" />
      </div>
      <div class="right-wrap video-wrap video1 score-wrap">
        <div class="top-wrap">
          <el-progress
            class="progress"
            :width="85"
            type="circle"
            :percentage="25"
          ></el-progress>
          <div>
            <p class="point">当前评分 <span>33</span> 分</p>
            <p class="result">未达到比赛运营标准</p>
          </div>
        </div>
        <div class="bottom-wrap">
          <el-progress
            class="progress"
            :width="85"
            type="circle"
            :percentage="25"
          ></el-progress>
          <el-progress
            class="progress"
            :width="85"
            type="circle"
            :percentage="25"
          ></el-progress>
          <el-progress
            class="progress"
            :width="85"
            type="circle"
            :percentage="25"
          ></el-progress>
          <p>基础设施</p>
          <p>人员安排</p>
          <p>赛事设备</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import infoContainer from "@/components/info-container.vue";

var echarts = require("echarts");
export default {
  components: {
    infoContainer
  },
  data() {
    return {
      option1: {
        legend: {
          type: "plain",
          textStyle: {
            color: "#fff"
          }
        },
        textStyle: {
          color: "#fff"
        },
        tooltip: {},
        xAxis: {
          data: ["一月", "二月", "三月", "四月", "五月", "六月"]
        },
        yAxis: {},
        series: [
          {
            name: "2018年",
            type: "line",
            data: [5, 20, 36, 10, 10, 20]
          },
          {
            name: "2019年",
            type: "line",
            data: [15, 20, 36, 10, 10, 20]
          }
        ]
      },
      option2: {
        tooltip: {},
        radar: {
          // shape: 'circle',
          name: {
            textStyle: {
              color: "#fff",
              backgroundColor: "#999",
              borderRadius: 3,
              padding: [3, 5]
            }
          },
          indicator: [
            {
              name: "7-17岁",
              max: 6500
            },
            {
              name: "17-27岁",
              max: 16000
            },
            {
              name: "27-47岁",
              max: 30000
            },
            {
              name: "47-57岁",
              max: 38000
            },
            {
              name: "57以上",
              max: 52000
            }
          ]
        },
        series: [
          {
            name: "预算 vs 开销（Budget vs spending）",
            type: "radar",
            // areaStyle: {normal: {}},
            data: [
              {
                value: [4300, 10000, 28000, 35000, 50000, 19000],
                name: "年龄"
              }
            ]
          }
        ]
      },
      option3: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        textStyle: {
          color: "#fff"
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: "category",
          data: ["艺人及时尚圈", "企业中高管", "上班族", "在校学生", "自由职业"]
        },
        series: [
          {
            name: "2011年",
            type: "bar",
            data: [18203, 23489, 29034, 104970, 131744, 630230]
          }
        ]
      }
    };
  },
  methods: {
    setChart1() {
      var myChart = echarts.init(document.getElementById("chart1"));
      myChart.setOption(this.option1);
    },
    setChart2() {
      var myChart = echarts.init(document.getElementById("chart2"));
      myChart.setOption(this.option2);
    },
    setChart3() {
      var myChart = echarts.init(document.getElementById("chart3"));
      myChart.setOption(this.option3);
    }
  },
  mounted() {
    this.setChart1();
    this.setChart2();
    this.setChart3();
  }
};
</script>
<style lang="less" scoped>
p {
  margin: 0;
}

.wrap {
  width: 100vw;
  height: 100vh;
  background: #020408;
  padding: 16px 8px;

  .left-container,
  .right-container {
    width: 951px;
    height: 106px;
    float: left;
    .title-container {
      width: 100%;
      height: 106px;
      background: url("../../../assets/images/title-background.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      font-size: 30px;
      font-family: SourceHanSansSC-Medium, SourceHanSansSC;
      font-weight: 500;
      color: rgba(0, 182, 199, 1);
      line-height: 45px;
      letter-spacing: 5px;
      line-height: 106px;
      margin-top: 0;
      margin-bottom: 0;
      position: relative;

      img {
        width: 35px;
        height: 36px;
        position: relative;
        top: 5px;
      }

      span {
        font-size: 26px;
        font-family: SourceHanSansSC-Regular, SourceHanSansSC;
        font-weight: 400;
        color: rgba(0, 182, 199, 1);
        line-height: 106px;
      }
    }

    .value-wrap {
      margin-top: 10px;
      background: url("../../../assets/images/container-background.png");
      background-size: 100% 100%;
      padding: 0 18px;

      .title-value-container {
        width: 100%;
        display: grid;
        grid-template-columns: 50% 50%;
        height: 60px;
        border-bottom: 1px dotted #fff;

        .title-text-container {
          font-size: 22px;
          font-family: SourceHanSansSC-Regular, SourceHanSansSC;
          font-weight: 400;
          color: rgba(226, 226, 226, 1);
          text-align: left;
          line-height: 60px;

          img {
            position: relative;
            top: 3px;
          }
        }

        p {
          font-size: 22px;
          font-family: SourceHanSansSC-Regular, SourceHanSansSC;
          font-weight: 400;
          color: rgba(226, 226, 226, 1);
          text-align: right;
          line-height: 60px;
          margin: 0;
        }
      }
    }

    .today-revenue-container {
      margin-top: 10px;
      width: 344px;
      height: 302px;
      background: url("../../../assets/images/container-background.png");
      background-size: 100% 100%;
      padding: 0 18px;
      float: left;

      .title-value-container {
        width: 100%;
        display: grid;
        grid-template-columns: 50% 50%;
        height: 60px;
        border-bottom: 1px dotted #fff;

        .title-text-container {
          font-size: 22px;
          font-family: SourceHanSansSC-Regular, SourceHanSansSC;
          font-weight: 400;
          color: rgba(226, 226, 226, 1);
          text-align: left;
          line-height: 60px;

          img {
            position: relative;
            top: 3px;
          }
        }

        p {
          font-size: 22px;
          font-family: SourceHanSansSC-Regular, SourceHanSansSC;
          font-weight: 400;
          color: rgba(226, 226, 226, 1);
          text-align: right;
          line-height: 60px;
          margin: 0;
        }
      }

      .content-container {
        width: 100%;
        height: 241px;

        .content-wrap {
          margin-top: 26px;
          width: 164px;
          height: 188px;
          float: left;
          background: url("../../../assets/images/revenue-value-container.png");
          background-size: 100% 100%;
          display: block;

          .title {
            font-size: 16px;
            font-family: SourceHanSansSC-Regular, SourceHanSansSC;
            font-weight: 400;
            color: rgba(226, 226, 226, 1);
            margin-top: 56px;
          }

          .value {
            font-size: 22px;
            font-family: SourceHanSansSC-Medium, SourceHanSansSC;
            font-weight: 500;
            color: rgba(226, 226, 226, 1);
            margin-top: 19px;
          }
        }

        .end-wrap {
          margin-left: 14px;
        }
      }
    }

    .statistics-container {
      width: 520px;
      height: 302px;
      float: left;
      margin-left: 10px;

      .content-container {
        width: 100%;
        height: 240px;
      }
    }

    .today-people-container {
      width: 344px;
      height: 302px;
      float: left;

      .user-container {
        width: 100%;
        height: 120px;
        display: grid;
        grid-template-columns: 33% 33% 33%;

        .progress {
          transform: scale(0.7);
        }

        .main-wrap {
          width: 100%;
          height: 100px;
          font-size: 20px;
          font-family: SourceHanSansSC-Regular, SourceHanSansSC;
          font-weight: 400;
          color: rgba(136, 136, 136, 1);

          .sex-text {
            margin-top: 30px;
          }
        }

        .percentage-text {
          line-height: 120px;
          font-size: 30px;
          font-family: SourceHanSansSC-Medium, SourceHanSansSC;
          font-weight: 500;
          color: rgba(0, 182, 199, 1);
        }
      }
    }

    .age-container {
      width: 520px;
      height: 302px;
      float: left;
      margin-left: 10px;

      .content-container {
        display: grid;
        grid-template-columns: 20% 20% 20% 20% 20%;

        .age {
          transform: scale(0.5);
        }

        p {
          font-size: 16px;
          font-family: SourceHanSansSC-Regular, SourceHanSansSC;
          font-weight: 400;
          color: rgba(0, 182, 199, 1);
          width: calc(100% - 20px);
          height: 32px;
          background: rgba(0, 43, 49, 1);
          border-radius: 8px;
          border: 1px solid rgba(0, 182, 199, 1);
          line-height: 32px;
          text-align: center;
          margin: 0 10px;
        }
      }
    }

    .age-pay-container {
      width: 344px;
      height: 302px;
      float: left;

      .content-container {
        width: 100%;
        height: 241px;
      }
    }

    .post-container {
      width: 520px;
      height: 302px;
      float: left;
      margin-left: 10px;

      .content-container {
        width: 100%;
        height: 240px;
      }
    }
  }

  .right-container {
    margin-left: 5px;
    .title-container {
      background: url("../../../assets/images/title1-background.png");
      background-size: 100% 100%;
      img {
        margin-left: 15px;
        position: relative;
        top: 7px;
      }
      span {
        color: #fff;
      }
    }
    .left-wrap {
      margin-top: 15px;
      width: 554px;
      height: 300px;
      float: left;
      background: url("../../../assets/images/container-background.png");
      background-size: 100% 100%;
    }
    .right-wrap {
      margin-top: 15px;
      width: 380px;
      height: 300px !important;
      float: left;
      margin-left: 10px;
      background: url("../../../assets/images/container-background.png");
      background-size: 100% 100%;
    }
    .info-wrap {
      height: 302px;
      margin-top: 10px;
      display: grid;
      grid-template-columns: 50% 50%;
    }
    .video-wrap {
      height: 302px;
      margin-top: 10px;
    }
    .video1 {
      margin-top: 10px;
    }
    .info-wrap {
      padding: 0;
    }
    .status-wrap {
      display: block;
      .top-wrap {
        width: 100%;
        height: 102px;
        display: grid;
        grid-template-columns: 25% 25% 25% 25%;
        .progress {
          margin: 8px auto;
        }
        p {
          font-size: 20px;
          font-family: SourceHanSansSC-Regular, SourceHanSansSC;
          font-weight: 400;
          color: rgba(136, 136, 136, 1);
          line-height: 102px;
          width: 100%;
        }
      }
      .bottom-wrap {
        display: grid;
        grid-template-columns: 100px auto;
        p {
          margin-top: 8px;
          font-size: 14px;
          font-family: SourceHanSansSC-Regular, SourceHanSansSC;
          font-weight: 400;
          color: rgba(136, 136, 136, 1);
        }
        .progress {
          margin-top: 9px;
        }
      }
    }
    .plan-wrap {
      .title-value-container {
        p {
          margin-right: 10px;
        }
      }
      padding: 0;
      .title {
        font-size: 20px;
        font-family: SourceHanSansSC-Regular, SourceHanSansSC;
        font-weight: 400;
        color: rgba(226, 226, 226, 1);
        line-height: 40px;
      }
      .value {
        width: calc(100% - 20px);
        height: 36px;
        background: linear-gradient(
          90deg,
          #00b6c7 0px,
          #00b6c7 2px,
          rgba(2, 17, 30, 1) 3px,
          rgba(2, 17, 30, 1) 100%
        );
        font-size: 16px;
        font-family: SourceHanSansSC-Regular, SourceHanSansSC;
        font-weight: 400;
        color: rgba(0, 182, 199, 1);
        line-height: 36px;
        margin-top: 10px;
        margin-left: 10px;
        span {
          float: right;
          margin-right: 10px;
        }
      }
      .change-background {
        background: linear-gradient(
          90deg,
          #cf2677 0px,
          #cf2677 2px,
          rgba(2, 17, 30, 1) 3px,
          rgba(2, 17, 30, 1) 100%
        );
      }
    }
    .score-wrap {
      .top-wrap {
        width: 100%;
        height: 100px;
        display: grid;
        grid-template-columns: 200px auto;
        .progress {
          display: block;
          margin: 30px auto;
          width: 85px;
          height: 85px;
        }
        .point {
          font-size: 16px;
          font-family: SourceHanSansSC-Regular, SourceHanSansSC;
          font-weight: 400;
          color: rgba(226, 226, 226, 1);
          text-align: left;
          margin-top: 50px;
          span {
            color: #00eaff;
          }
        }
        .result {
          font-size: 12px;
          font-family: SourceHanSansSC-Regular, SourceHanSansSC;
          font-weight: 400;
          color: rgba(136, 136, 136, 1);
          text-align: left;
          margin-top: 10px;
        }
      }
      .bottom-wrap {
        width: 100%;
        display: grid;
        grid-template-columns: auto auto auto;
        .progress {
          width: 85px;
          height: 85px;
          margin: 0 auto;
          margin-top: 50px;
        }
        p {
          font-size: 16px;
          font-family: SourceHanSansSC-Regular, SourceHanSansSC;
          font-weight: 400;
          color: rgba(136, 136, 136, 1);
          line-height: 40px;
        }
      }
    }
    .title-icon {
      margin-left: 10px;
    }
  }
  // 通用
  .title-icon {
    width: 26px;
    height: 26px;
  }
}
</style>
